<template>
  <div class="order-history-container">
    <!-- 桌面端表格 -->
    <div class="desktop-view">
      <div
        class="filter-container"
        v-show="['13566511216'].includes(WORKID)"
      >

        <!-- <el-input
          v-model="searchQuery"
          placeholder="搜索订单号"
          class="search-input"
        /> -->

        <el-select
          v-model="filterPackage"
          class="mobile-status"
          placeholder="选择包厢"
          clearable
        >
          <el-option
            v-for="opt in packageOptions"
            :key="opt.key"
            :value="opt.value"
            :label="opt.label"
          >
            {{ opt.label }}
          </el-option>
        </el-select>

        <el-select
          v-model="filterStatus"
          class="status-select"
          placeholder="选择状态"
          clearable
        >
          <el-option
            v-for="status in statusOptions"
            :key="status"
            :value="status"
          >
            {{ status }}
          </el-option>
        </el-select>

      </div>

      <el-table
        :data="filteredOrders"
        style="width: 100%"
        max-height="80vh"
        border
        v-loading="loading"
        @row-click="toggleRowExpansion"
        :row-class-name="tableRowClassName"
      >
        <!-- <el-table-column type="expand">
          <template #default="{ row }">
            <el-card
              class="order-details"
              style="width:20%"
            >
              <h3>订单详情</h3>
              <div class="items-list">
                <div
                  v-for="(item, index) in row.items"
                  :key="index"
                  class="card-header"
                >
                  <span class="item-name">{{ item.name }}</span>
                  <span class="item-quantity">×{{ item.quantity }}</span>
                  <span class="item-price">¥{{ (item.price * item.quantity).toFixed(2) }}</span>
                </div>
                <el-divider />
                <div class="card-header">
                  <span class="item-name">总价</span>
                  <span class="item-quantity"></span>
                  <span class="item-price">¥{{ row.total.toFixed(2) }}</span>
                </div>
              </div>
            </el-card>
          </template>
        </el-table-column> -->

        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60"
        >
        </el-table-column>
        <el-table-column
          prop="BX_ID"
          label="包厢"
          align="center"
          width="100"
          sortable
        >
          <template #default="{ row }">
            {{bxName(row.BX_ID)}}
          </template>
        </el-table-column>

        <el-table-column
          prop="RECORD_TIME"
          label="日期"
          align="center"
          sortable
          width="140"
        >
          <template #default="{ row }">
            <span v-if="row.RECORD_TIME">
              {{row.RECORD_TIME.replace('11:50:00', '中餐').replace('17:30:00', '晚餐')}}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          prop="CAPACITY"
          label="人数"
          align="center"
          width="60"
        />

        <el-table-column
          prop="BX_BZ"
          label="消费标准"
          align="center"
          width="100"
        />

        <el-table-column
          prop="DW"
          label="客户名称"
          align="center"
          width=""
        />

        <el-table-column
          prop="YCBM"
          label="用餐部门"
          align="center"
          width=""
        />

        <el-table-column
          prop="USERNAME"
          label="申请人"
          align="center"
          width="80"
        />

        <el-table-column
          prop="LXR"
          label="联系人"
          align="center"
          width="80"
        />

        <el-table-column
          prop="PHONE"
          label="电话"
          align="center"
          width="120"
        />

        <el-table-column
          prop="REAMRK"
          label="备注"
          align="center"
        />

        <el-table-column
          label="状态"
          width="120"
          align="center"
        >
          <template #default="{ row }">
            <el-tag :type="statusTagType(row.STATE)">
              {{ row.STATE }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- <el-table-column
          prop="total"
          label="总金额"
          width="120"
        >
          <template #default="{ row }">
            ¥{{ row.total.toFixed(2) }}
          </template>
        </el-table-column> -->

        <el-table-column
          label="操作"
          width="150"
          align="center"
        >
          <template #default="{ row }">

            <!-- 创建人操作 -->
            <div v-if="[WORKID].includes(row.WORKID)">
              <el-button
                type="danger"
                size="large"
                style="font-size:15px"
                circle
                @click.stop="handleDelete(row)"
                v-if="['待审核','已审核','进行中'].includes(row.STATE)"
              >
                <el-icon>
                  <Delete />
                </el-icon>
              </el-button>
            </div>

            <!-- 审批人操作 -->
            <div v-if="row.SP_ID == WORKID">
              <el-button
                type="success"
                size="large"
                style="font-size:15px"
                circle
                @click.stop="handleComfirm(row)"
                v-if="row.STATE == '待审核'"
              >
                <el-icon>
                  <Check />
                </el-icon>
              </el-button>
            </div>

            <!-- 食堂操作 -->
            <div v-if="['13566511216'].includes(WORKID)">
              <el-button
                type="success"
                size="large"
                style="font-size:20px"
                circle
                @click.stop="handleComfirm(row)"
                v-if="row.STATE == '已审核'"
              >
                <el-icon>
                  <Download />
                </el-icon>
              </el-button>

              <el-button
                type="success"
                size="large"
                style="font-size:20px"
                circle
                @click.stop="handleComfirm(row)"
                v-if="row.STATE == '进行中' && nowTimeStr > row.RECORD_TIME"
              >
                <el-icon>
                  <Finished />
                </el-icon>
              </el-button>

              <el-popconfirm
                :title="`订单 ${row.STATE}，确定删除吗?`"
                @confirm="handleDelete(row)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    size="large"
                    style="font-size:20px"
                    circle
                    v-show="['已审核','进行中'].includes(row.STATE)"
                  >
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </template>
              </el-popconfirm>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 移动端卡片 -->
    <div class="mobile-view">
      <div
        class="mobile-filter"
        v-show="['13566511216'].includes(WORKID)"
      >

        <!-- <el-input
          v-model="searchQuery"
          placeholder="搜索订单"
          class="mobile-search"
        /> -->

        <el-select
          v-model="filterPackage"
          placeholder="选择包厢"
          class="mobile-status"
          clearable
        >
          <el-option
            v-for="opt in packageOptions"
            :key="opt.key"
            :value="opt.value"
            :label="opt.label"
          >
            {{ opt.label }}
          </el-option>
        </el-select>

        <el-select
          v-model="filterStatus"
          class="mobile-status"
          placeholder="选择状态"
          clearable
        >
          <el-option
            v-for="status in statusOptions"
            :key="status"
            :value="status"
          >
            {{ status }}
          </el-option>
        </el-select>

      </div>

      <div class="order-cards">
        <el-card
          v-for="order in paginatedOrders"
          :key="order.BX_RECORD_ID"
          class="order-card"
          :style="{ backgroundColor: newBX_RECORD_ID == order.BX_RECORD_ID ? 'rgb(239.8, 248.9, 235.3)':'' }"
        >
          <div class="card-header">
            <!-- <div class="order-number">{{  }}</div> -->
            <el-tag
              size="large"
              style="color:rgb(0, 53, 140);font-size:20px"
              :type="statusTagType(order.STATE)"
            >
              <span v-if="order.STATE == '待审核'">
                {{ dayjs().format('YYYY/MM/DD HH:mm:ss') > order.RECORD_TIME ? `已完成用餐，补审批` : `审核中。。。` }}
              </span>
              <span v-else>{{ order.STATE }}</span>
            </el-tag>
          </div>

          <div class="card-body">
            <div class="info-row">
              <span>包厢：{{ bxName(order.BX_ID) }}</span>
            </div>
            <div class="info-row">
              <span v-if="order.RECORD_TIME">日期：{{ order.RECORD_TIME.replace('11:50:00', '中餐').replace('17:30:00', '晚餐') }}</span>
            </div>
            <div class="info-row">
              <span>人数：{{ order.CAPACITY }}</span>
            </div>
            <div class="info-row">
              <span>消费标准：{{ order.BX_BZ }}</span>
            </div>
            <div class="info-row">
              <span>客户名称：{{ order.DW }}</span>
            </div>
            <div class="info-row">
              <span v-if="order.YCBM">用餐部门：{{ order.YCBM.split('-')[0] }}</span>
            </div>
            <div class="info-row">
              <span>联系人：{{ order.LXR }}</span>
            </div>
            <div class="info-row">
              <span>联系方式：{{ order.PHONE }}</span>
            </div>
            <div class="info-row">
              <span>备注：{{ order.REMARK }}</span>
            </div>

            <!-- 创建人操作 -->
            <div v-if="[WORKID].includes(order.WORKID)">
              <el-button
                type="danger"
                size="large"
                style="font-size:15px"
                circle
                @click.stop="handleDelete(order)"
                v-if="['待审核','已审核','进行中'].includes(order.STATE)"
              >
                <el-icon>
                  <Delete />
                </el-icon>
              </el-button>
            </div>

            <!-- 审批人操作 -->
            <div v-if="order.SP_ID == WORKID">
              <el-button
                type="success"
                size="large"
                @click.stop="handleComfirm(order)"
                v-if="order.STATE == '待审核'"
              >
                审核
              </el-button>
            </div>

            <!-- 食堂操作 -->
            <div v-show="['13566511216'].includes(WORKID)">
              <el-button
                type="success"
                size="large"
                style="font-size:20px"
                circle
                @click.stop="handleComfirm(order)"
                v-if="['待审核','已审核'].includes(order.STATE)"
              >
                <el-icon>
                  <Download />
                </el-icon>
              </el-button>

              <el-button
                type="success"
                size="large"
                style="font-size:20px"
                circle
                @click.stop="handleComfirm(order)"
                v-if="order.STATE == '进行中' && nowTimeStr > order.RECORD_TIME"
              >
                <el-icon>
                  <Finished />
                </el-icon>
              </el-button>

              <el-popconfirm
                :title="`订单 ${order.STATE}，确定删除吗?`"
                @confirm="handleDelete(order)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    size="large"
                    style="font-size:20px"
                    circle
                    v-show="['已审核','进行中'].includes(order.STATE)"
                  >
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </template>
              </el-popconfirm>

            </div>

            <!-- <div
              v-show="expandedOrder === order.orderNumber"
              class="details"
            >

              <div class="card-header">
                <div class="item-name">菜品</div>
                <div class="item-name">数量</div>
                <div class="item-name">小计</div>
              </div>

              <div
                v-for="(item, index) in order.items"
                :key="index"
                class="card-header"
              >
                <div class="item-name">{{ item.name }}</div>
                <div class="item-info">
                  <span>{{ item.quantity }}</span>
                </div>
                <div class="item-info">
                </div>
              </div>
            </div> -->
          </div>

          <div class="card-footer">
            <!-- <el-button
              class="mobile-detail-btn"
              @click="toggleDetails(order.orderNumber)"
            >
              {{ expandedOrder === order.orderNumber ? '收起' : '详情' }}
            </el-button> -->
          </div>
        </el-card>
      </div>

      <div class="mobile-pagination">
        <el-button
          @click="currentPage--"
          :disabled="currentPage === 1"
        >
          上一页
        </el-button>
        <span>第 {{ currentPage }} 页</span>
        <el-button
          @click="currentPage++"
          :disabled="currentPage === totalPages"
        >
          下一页
        </el-button>
      </div>
    </div>

    <!-- 删除确认对话框 -->
    <!-- <div
      v-if="deleteDialogVisible"
      class="dialog-overlay"
    >
      <div class="dialog-content">
        <h3>确认删除订单 {{ selectedOrder?.orderNumber }} 吗？</h3>
        <div class="dialog-buttons">
          <button @click="deleteDialogVisible = false">取消</button>
          <button
            @click="confirmDelete"
            class="confirm-delete"
          >确认删除</button>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import myAxios from '@/myAxios/myAxios';
import router from '@/router';
import { ref, computed, onMounted } from 'vue';
import { Check, Download, Finished, Delete } from '@element-plus/icons-vue';
import { showSuccess, showWarning } from '@/hooks/useMyMessageBox';
import VueCookie from 'vue-cookie';
import myAxiosWXPost from '@/myAxios/myAxiosWXPost';
import { dayjs } from 'element-plus';

let WORKID = VueCookie.get('userid');
console.log('WORKID :>> ', WORKID);
// let WORKID = '10659';

// 订单数据
const orders = ref([
  {
    orderNumber: '20231108001',
    date: '2023-11-08',
    status: '已完成',
    total: 128.50,
    items: [
      { name: '宫保鸡丁', price: 38, quantity: 2 },
      { name: '鱼香肉丝', price: 32, quantity: 1 }
    ]
  },
  {
    orderNumber: '20231108002',
    date: '2023-11-08',
    status: '已完成',
    total: 128.50,
    items: [
      { name: '宫保鸡丁', price: 38, quantity: 2 },
      { name: '鱼香肉丝', price: 32, quantity: 1 }
    ]
  },
  {
    orderNumber: '20231108003',
    date: '2023-11-08',
    status: '已完成',
    total: 128.50,
    items: [
      { name: '宫保鸡丁', price: 38, quantity: 2 },
      { name: '鱼香肉丝', price: 32, quantity: 1 }
    ]
  },
  {
    orderNumber: '20231108004',
    date: '2023-11-08',
    status: '已完成',
    total: 128.50,
    items: [
      { name: '宫保鸡丁', price: 38, quantity: 2 },
      { name: '鱼香肉丝', price: 32, quantity: 1 }
    ]
  },
  // 更多测试数据...
]);

// 响应式状态13566511216
let nowTimeStr = dayjs().format('YYYY/MM/DD HH:mm:ss');
// let nowTimeStr = '2025/04/01 11:50:00';
const loading = ref(false);
const searchQuery = ref('');
const filterStatus = ref('');
const filterPackage = ref('');
const currentPage = ref(1);
const pageSize = 1;
const deleteDialogVisible = ref(false);
const selectedOrder = ref(null);
const expandedOrder = ref(null);
const sortKey = ref('date');
const sortOrder = ref('desc');

// 配置选项
const statusOptions = ['待审核', '已审核', '进行中', '已完成'];
const packageOptions = ref([]);

// 计算属性
const filteredOrders = computed(() => {
  let f_data = orders.value;
  if (filterStatus.value) {
    f_data = f_data.filter(item => item.STATE == filterStatus.value);
  }
  if (filterPackage.value) {
    f_data = f_data.filter(item => item.BX_ID == filterPackage.value);
  }

  return f_data;
});

const bxName = (id) => {
  let bxItem = packageOptions.value.find(item => item.value == id);
  if (bxItem) {
    return bxItem.label;
  }
  else {
    return id;
  }
};
const statusTagType = (status) => {
  const types = {
    '待审核': 'info',
    '已审核': 'success',
    '进行中': 'primary',
    '已完成': 'success',
  };
  return types[status] || 'info';
};

const sortedOrders = computed(() => {
  return [...filteredOrders.value].sort((a, b) => {
    const modifier = sortOrder.value === 'asc' ? 1 : -1;
    if (a[sortKey.value] > b[sortKey.value]) return 1 * modifier;
    if (a[sortKey.value] < b[sortKey.value]) return -1 * modifier;
    return 0;
  });
});

const totalPages = computed(() => Math.ceil(sortedOrders.value.length / pageSize));
const paginatedOrders = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  return sortedOrders.value.slice(start, start + pageSize);
});

// 方法
const statusClass = (status) => {
  return {
    '已完成': 'completed',
    '进行中': 'processing',
    '已取消': 'canceled'
  }[status] || '';
};

const toggleDetails = (orderNumber) => {
  expandedOrder.value = expandedOrder.value === orderNumber ? null : orderNumber;
};

const handleComfirm = async (order) => {
  let newState = ``;
  if (order.STATE == '待审核') {
    // 食堂强行接收待审批订单
    if (['13566511216'].includes(WORKID)) {
      let result = await confirmFunction('确定接收待审核订单?');
      if (result) {
        newState = '进行中';
      }
      else {
        return;
      }
    }
    else {
      newState = '已审核';
    }
  }
  if (order.STATE == '已审核') {
    newState = '进行中';
  }
  else if (order.STATE == '进行中') {
    newState = '已完成';
  }
  let stateParam = `${order.BX_RECORD_ID}\t${newState}`;
  let result = await myAxios.post(`陈帅廷修改包厢预约记录状态`, stateParam);
  if (result.includes('成功')) {
    showSuccess("状态修改成功");

    let nowDate = dayjs().format('YYYY/MM/DD HH:mm:ss');
    // 审核通过,发送微信通知
    if (newState == '已审核') {
      SendTemplate_WX(order);

      let spTitle = `您的餐厅预约已通过审批` + (nowDate > order.RECORD_TIME ? `--已完成用餐，补审批` : ``);
      let pushRes = await myAxios.postToWeChatText(order.WORKID, spTitle, spTitle);
    }
    if (newState == '进行中') {
      let spTitle = `您有新的餐厅预约已审批通过并得到食堂确认` + (nowDate > order.RECORD_TIME ? `--已完成用餐，补审批` : ``);
      let msg = `${spTitle}\r\n`
        + `包厢: ${bxName(order.BX_ID)}\r\n`
        + `日期: ${order.RECORD_TIME.replace('11:50:00', '').replace('17:30:00', '')}\r\n`
        + `用餐时间: ${order.RECORD_TIME.includes('11:50:00') ? '11:50-13:00' : '17:30-20:00'}\r\n`
        + `人数: ${order.CAPACITY}\r\n`
        + `消费标准: ${order.BX_BZ}\r\n`
        + `客户名称: ${order.DW}\r\n`
        + `用餐部门: ${order.YCBM}\r\n`
        + `联系人: ${order.LXR}\r\n`
        + `联系方式: ${order.PHONE}\r\n`
        // +`预约时间: ${ dayjs(order.RECORD_TIME).format('YYYY-MM-DD HH:mm:ss') }\r\n`
        + `备注: ${order.REMARK}\r\n`;
      msg = msg.replace(/null/g, '').replace(/undefined/g, '');
      let pushRes = await myAxios.postToWeChatText(order.WORKID, msg, msg);
    }
    order.STATE = newState;
  }
  else {
    showWarning("状态修改失败" + result);
  }
  // selectedOrder.value = order;
  // deleteDialogVisible.value = true;
};
// myAxios.postToWeChatText('14602', `您的餐厅预约食堂已确认,请准时用餐`, `您的餐厅预约食堂已确认,请准时用餐\r\n123`);
const confirmFunction = (msg) => {
  return new Promise((resolve, reject) => {
    ElMessageBox.confirm(
      msg,
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      resolve(1);
    }).catch(() => {
      resolve(0);
    });
  });
};

const SendTemplate_WX = (order, isSuccess = true) => {
  let BX_NAME = bxName(order.BX_ID);
  BX_NAME += isSuccess ? '' : '已取消';
  if (dayjs().format('YYYY/MM/DD HH:mm:ss') > order.RECORD_TIME) {
    if (isSuccess) {
      BX_NAME = `已完成用餐，补审批`;
    }
  }
  let RECORD_TIME = order.RECORD_TIME;
  let NAME = order.USERNAME;
  let url = `http://smart.haitian.com/Cheresting/driver_order_menu/dist/index.html#/roomHistory`
    + `?BX_RECORD_ID=${order.BX_RECORD_ID}`;
  let content = {
    'openId': 'ok-KS08CgnvAOLKnALEL142tsqYk',
    'url': url,
    'title': `${BX_NAME}`,
    'data1': `${BX_NAME}`,
    'data2': `${RECORD_TIME}`,
    'data3': `${order.WORKID} ${NAME}`,
    // 'description': '外卖订单/包厢订单',
    // 'picurl': '11',
    'remark': '请及时接收',
    'tokenname': 'ACCESS_TOKEN_WX_QDFW'
  };
  myAxiosWXPost.post(`http://192.168.100.28:85/WorkWxMsgService/WxWorkMsgService.asmx`,
    `SendTemplate_WX`, content)
    .then(pushRes => {
      if (pushRes.includes('成功')) {
        if (isSuccess) {
          let nowStr = dayjs().format('YYYY/MM/DD HH:mm:ss');
          myAxios.post('陈帅廷更新食堂包厢记录推送时间', `${order.BX_RECORD_ID}\t${nowStr}`);
        }
      }
      console.log('pushRes :>> ', pushRes);
    });
};



const handleDelete = async (order) => {
  // 获取 order.RECORD_TIME 前一天的17点
  let time5 = dayjs(order.RECORD_TIME).add(-1, 'day').format('YYYY/MM/DD') + ' 17:00:00';
  if (nowTimeStr >= time5) {
    showWarning('食堂已确认,请电话联系食堂(651018/13566511216)删除');
    return;
  }
  let stateParam = `${order.BX_RECORD_ID}\t${'已删除'}`;
  let result = await myAxios.post(`陈帅廷修改包厢预约记录状态`, stateParam);
  if (result.includes('成功')) {
    showSuccess("删除成功");
    let index = orders.value.findIndex(item => item.BX_RECORD_ID === order.BX_RECORD_ID);
    if (index !== -1) {
      orders.value.splice(index, 1);
    }
    SendTemplate_WX(order, false);
  }
  else {
    showWarning("删除失败" + result);
  }
  // selectedOrder.value = order;
  // deleteDialogVisible.value = true;
};

const confirmDelete = () => {
  orders.value = orders.value.filter(
    o => o.orderNumber !== selectedOrder.value.orderNumber
  );
  deleteDialogVisible.value = false;
};

const toggleRowExpansion = (row) => {
  const table = document.querySelector('.el-table__body-wrapper');
  const rowElement = table.querySelector(`tr[data-id="${row.orderNumber}"]`);
  rowElement?.querySelector('.el-table__expand-icon')?.click();
};
const newBX_RECORD_ID = router.currentRoute.value.query.BX_RECORD_ID;

const tableRowClassName = ({ row, rowIndex }) => {
  if (row.BX_RECORD_ID === newBX_RECORD_ID) {
    return 'success-row';
  }
  return '';
};
const sortBy = (key) => {
  if (sortKey.value === key) {
    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
  } else {
    sortKey.value = key;
    sortOrder.value = 'asc';
  }
};

// 初始化
onMounted(() => {
  // 可以在此处添加数据加载逻辑
  let record_param = `\t\t${WORKID}`;
  if (['13566511216'].includes(WORKID)) {
    record_param = `\t\t`;
  }
  myAxios.get('陈帅廷查询包厢预约记录', record_param, '9900').then(res => {
    myAxios.get('陈帅廷查询待审批包厢预约记录', `${WORKID}`, '9900').then(dsp_res => {
      orders.value = [...dsp_res, ...res];
      if (newBX_RECORD_ID) {
        let index = orders.value.findIndex(el => el.BX_RECORD_ID === newBX_RECORD_ID);
        let page = Math.floor(index / pageSize) + 1;
        // console.log('page :>> ', page);
        currentPage.value = page > 0 ? page : 1;
      }
    });
  });

  let bx_param = ``;
  myAxios.get('陈帅廷查询食堂包厢', bx_param, '9900').then(res => {
    res.forEach(el => {
      el.key = el.BX_ID;
      el.value = el.BX_ID;
      el.label = el.NAME;
    });
    packageOptions.value = [...res];
  });
})
</script>

<style scoped>
:deep(.warning-row) {
  --el-table-tr-bg-color: var(--el-color-warning-light-9) !important;
}
:deep(.success-row) {
  --el-table-tr-bg-color: var(--el-color-success-light-9) !important;
}

.order-history-container {
  padding: 20px;
  /* max-width: 1200px; */
  margin: 0 auto;
}

/* 桌面端样式 */
.desktop-view {
  display: block;
}
.filter-container {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
.order-table {
  width: 100%;
  border-collapse: collapse;
}
.order-table th,
.order-table td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}
.order-table th {
  background-color: #f8f9fa;
  cursor: pointer;
}
.status-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}
.completed {
  background: #e6ffed;
  color: #237804;
}
.processing {
  background: #fff7e6;
  color: #ad6800;
}
.canceled {
  background: #fff1f0;
  color: #cf1322;
}

/* 移动端样式 */
.mobile-view {
  display: none;
}
.mobile-filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}
.order-card {
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 15px;
}
.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.info-row {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
}
.details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

/* 响应式切换 */
@media (max-width: 768px) {
  .desktop-view {
    display: none;
  }
  .mobile-view {
    display: block;
  }
}

/* 通用样式 */
button {
  padding: 6px 12px;
  margin: 0 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.delete-btn,
.mobile-delete-btn {
  background: #ff4d4f;
  color: white;
  border-color: #ff4d4f;
}
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 300px;
}
</style>